<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div class="app-container">
    <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->
    <div class="filter-container">

      <el-button class="filter-item" type="primary" icon="el-icon-edit"
                 @click="handleAdd">新增
      </el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
              :header-cell-style="{background:'#92D3FF',color:'#fff'}">

      <el-table-column align="center" min-width="100" label="银行编码" prop="bankCode"/>
      <el-table-column align="center" min-width="100" label="银行名称" prop="bankName"/>
      <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-popover
            placement="top"
            width="200"
            trigger="manual"
            :ref="'popover-' + scope.row.bankCode">
            <p>确定删除该数据吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[`popover-` + scope.row.bankCode].doClose()">取消</el-button>
              <el-button type="primary" size="mini" @click="doDelete(scope.row)">确定</el-button>
            </div>
            <el-button type="danger" size="mini" slot="reference" @click="$refs[`popover-` + scope.row.bankCode].doShow()">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
    @pagination="getList"/>
    <!-- 分配订单对话框 -->
    <el-dialog :visible.sync="editDialogVisible" title="新增银行" :close-on-click-modal="false">
      <el-form ref="editForm" :rules="editFormRules" :model="editForm" status-icon label-position="left"
               label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="银行编码" prop="bankCode">
          <el-input v-model="editForm.bankCode"/>
        </el-form-item>
        <el-form-item label="银行名称" prop="bankName">
          <el-input v-model="editForm.bankName" auto-complete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="doEdit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {doGet, doPost} from '@/api'
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
    export default {
        name: 'bank',
        components: {Pagination},
        filters: {},
        data() {
            return {
                list: [],
                total: 0,
                listLoading: true,
                listQuery: {
                    pageNum: 1,
                    pageSize: 20,
                },
                editForm: {
                    bankCode: undefined,
                    bankName: undefined
                },
                editFormRules: {
                    bankCode: [{required: true, message: '银行编码不允许为空', trigger: 'blur'}],
                    bankName: [{required: true, message: '银行名称不允许为空', trigger: 'blur'}]
                },
                editDialogVisible: false,
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                this.listLoading = true
                doGet('bank.html?op=list', this.listQuery).then(response => {
                    this.list = response.rows
                    this.total = response.data.totalcount
                    this.listLoading = false
                }).catch(() => {
                    this.list = []
                    this.total = 0
                    this.listLoading = false
                })
            },
            handleAdd() {
                this.editForm.bankName = undefined
                this.editForm.bankCode = undefined
                this.editDialogVisible = true
                this.$nextTick(() => {
                    this.$refs['editForm'].clearValidate()
                })
            },
            doEdit() {
                this.$refs['editForm'].validate(valid => {
                    if (valid) {
                        doGet('bank.html?op=add', this.editForm)
                            .then(response => {
                                this.getList()
                                this.editDialogVisible = false
                                this.$notify.success({
                                    title: '成功',
                                    message: '添加银行编码成功'
                                })
                            })
                            .catch(response => {
                                this.$notify.error({
                                    title: '失败',
                                    message: response.message
                                })
                            })
                    }
                })
            },
            doDelete(row) {
                doGet("bank.html?op=del", row)
                    .then(response => {
                        this.$notify.success({
                            title: '成功',
                            message: '删除成功'
                        })
                        const index = this.list.indexOf(row)
                        this.list.splice(index, 1)
                      this.total--
                      this.$refs[`popover-` + row.bankCode].doClose()
                    })
                    .catch(response => {
                        this.$notify.error({
                            title: '失败',
                            message: response.message
                        })
                    })
            }
        }
    }
</script>
